<script lang="ts" setup>
import type {Ref} from "vue";
import {onBeforeMount, onMounted, onUnmounted, ref} from "vue";
import LineChart from "@/components/charts/LineChart.vue";
import type {ChartData} from "@/components/charts/LineChart.vue";
import {getLatestData, listLatestData} from "@/api/dashboard";

const msgInflowRef = ref()
const msgOutflowRef = ref()
const connectRef = ref()
const onlineConnectRef = ref()
const topicRef = ref()
const subscriptionRef = ref()

let loop1: NodeJS.Timeout
let loop2: NodeJS.Timeout

onBeforeMount(() => {
  getChartData()
  getCardData()
})

onMounted(() => {
  loop1 = setInterval(getCardData, 1000)
  loop2 = setInterval(getChartData, 10000)
})

onUnmounted(() => {
  clearInterval(loop1)
  clearInterval(loop2)
})

function getChartData(): void {
  listLatestData(3600).then(res => {
    const body = res.data.body;
    const dates: string[] = [];
    const msgInflows: number[] = [];
    const msgOutflows: number[] = [];
    const connects: number[] = [];
    const onlineConnects: number[] = [];
    const topics: number[] = [];
    const subscriptions: number[] = [];
    body.forEach(latestData => {
      dates.push(latestData.dateTime);
      msgInflows.push(latestData.msgInflow);
      msgOutflows.push(latestData.msgOutflow);
      connects.push(latestData.connect);
      onlineConnects.push(latestData.onlineConnect);
      topics.push(latestData.topics);
      subscriptions.push(latestData.subscriptions);
    })
    msgInflowChart.xData = dates;
    msgInflowChart.seriesData = msgInflows;
    msgOutflowChart.xData = dates;
    msgOutflowChart.seriesData = msgOutflows;
    connectChart.xData = dates;
    connectChart.seriesData = connects;
    onlineConnectChart.xData = dates;
    onlineConnectChart.seriesData = onlineConnects;
    topicsChart.xData = dates;
    topicsChart.seriesData = topics;
    subscriptionsChart.xData = dates;
    subscriptionsChart.seriesData = subscriptions;
    msgInflowRef.value.updateData();
    msgOutflowRef.value.updateData();
    connectRef.value.updateData();
    onlineConnectRef.value.updateData();
    topicRef.value.updateData();
    subscriptionRef.value.updateData();
  })
}

function getCardData(): void {
  getLatestData().then(res => {
    cardData.value = res.data.body
  })
}

interface CardData {
  msgInflow: number
  msgOutflow: number
  connect: number
  onlineConnect: number
  topics: number
  subscriptions: number
}

const cardData: Ref<CardData> = ref({
  msgInflow: 0,
  msgOutflow: 0,
  connect: 0,
  onlineConnect: 0,
  topics: 0,
  subscriptions: 0
})

const msgInflowChart: ChartData = {
  seriesData: [],
  title: "消息流入",
  xData: [],
  seriesName: "10秒内消息总数",
  itemColor: "rgb(51,144,184)"
}

const msgOutflowChart: ChartData = {
  seriesData: [],
  title: "消息流出",
  xData: [],
  seriesName: "10秒内消息总数",
  itemColor: "rgb(51,82,184)"
}

const connectChart: ChartData = {
  seriesData: [],
  title: "连接数",
  xData: [],
  seriesName: "连接数",
  itemColor: "rgb(171,184,51)"
}

const onlineConnectChart: ChartData = {
  seriesData: [],
  title: "在线连接数",
  xData: [],
  seriesName: "在线连接数",
  itemColor: "rgb(184,91,51)"
}

const topicsChart: ChartData = {
  seriesData: [],
  title: "主题数",
  xData: [],
  seriesName: "主题数",
  itemColor: "rgb(146,51,184)"
}

const subscriptionsChart: ChartData = {
  seriesData: [],
  title: "订阅数",
  xData: [],
  seriesName: "订阅数",
  itemColor: "rgb(184,51,126)"
}

</script>

<template>
  <el-row :gutter="20">
    <el-col :xs="12" :sm="8" :md="6" :lg="4">
      <el-card shadow="always">
        <el-statistic :value="cardData.msgInflow" title="消息流入">
          <template #suffix>
            <span style="font-size: 12px; color: grey"> 条/秒</span>
          </template>
        </el-statistic>
      </el-card>
    </el-col>
    <el-col :xs="12" :sm="8" :md="6" :lg="4">
      <el-card shadow="always">
        <el-statistic :value="cardData.msgOutflow" title="消息流出">
          <template #suffix>
            <span style="font-size: 12px; color: grey"> 条/秒</span>
          </template>
        </el-statistic>
      </el-card>
    </el-col>
    <el-col :xs="12" :sm="8" :md="6" :lg="4">
      <el-card shadow="always">
        <el-statistic :value="cardData.connect" title="连接数"/>
      </el-card>
    </el-col>
    <el-col :xs="12" :sm="8" :md="6" :lg="4">
      <el-card shadow="always">
        <el-statistic :value="cardData.onlineConnect" title="在线连接数"/>
      </el-card>
    </el-col>
    <el-col :xs="12" :sm="8" :md="6" :lg="4">
      <el-card shadow="always">
        <el-statistic :value="cardData.topics" title="主题数"/>
      </el-card>
    </el-col>
    <el-col :xs="12" :sm="8" :md="6" :lg="4">
      <el-card shadow="always">
        <el-statistic :value="cardData.subscriptions" title="订阅数"/>
      </el-card>
    </el-col>
  </el-row>
  <el-row style="margin-top: 80px;">
    <el-col :sm="12" :md="12" :lg="8">
      <LineChart ref="msgInflowRef" :chart-data="msgInflowChart"/>
    </el-col>
    <el-col :sm="12" :md="12" :lg="8">
      <LineChart ref="msgOutflowRef" :chart-data="msgOutflowChart"/>
    </el-col>
    <el-col :sm="12" :md="12" :lg="8">
      <LineChart ref="connectRef" :chart-data="connectChart"/>
    </el-col>
    <el-col :sm="12" :md="12" :lg="8">
      <LineChart ref="onlineConnectRef" :chart-data="onlineConnectChart"/>
    </el-col>
    <el-col :sm="12" :md="12" :lg="8">
      <LineChart ref="topicRef" :chart-data="topicsChart"/>
    </el-col>
    <el-col :sm="12" :md="12" :lg="8">
      <LineChart ref="subscriptionRef" :chart-data="subscriptionsChart"/>
    </el-col>
  </el-row>
</template>

<style scoped>
</style>
